<template>
	<view>
		<view class="user-header">
			<view class="user-info-box" @click="$refs.avatarUp.open()">
				<image :src="userInfo.avatar||'/static/user-default.jpg'" class="user-pic" mode="widthFix"></image>
				<view>
					<text class="user-name">{{userInfo.nickName}}</text>
					<view>
						<text class="growth-value">成长值0</text>
					</view>
				</view>
			</view>
			<!-- 头像选择弹出层 -->
			<uni-popup ref="avatarUp" type="bottom">
				<view class="avatar-up">
					<view class="avatar-btn" @click="changeImg">
						使用微信头像及昵称
					</view>
					<view class="avatar-close-btn" @click="$refs.avatarUp.close()">
						取消
					</view>
				</view>
			</uni-popup>
			<view class="vip-box" @click="getVip">
				<view class="vip-left" style="color: #ffdea0">
					<uni-icons type="vip-filled" size="25" color="#ffd564"></uni-icons>
					<text> 阳光蛋糕</text>
				</view>
				<view class="vip-right" style="color: #fff">
					<text>成为会员</text>
					<uni-icons type="right" size="12" color="#fff"></uni-icons>
				</view>
			</view>
			<view class="vip-code">
				<uni-icons custom-prefix="iconfont" type="icon-erweima" size="12" color="#fff"></uni-icons>
				<text style="padding-left:6rpx;">会员码</text>
			</view>
		</view>

		<view class="user-body">

			<!-- 卡包券 -->
			<view class="card-pack bg-card">
				<view v-for="(item,i) in cardPack" :key="i" class="card-pack-item">
					<view>{{item.num}} <text v-if="i==0">.00</text> </view>
					<view class="pack-name">{{item.name}}</view>
				</view>
				<view class="card-pack-item">
					<uni-icons type="wallet"></uni-icons>
					<view class="pack-name">我的钱包</view>
				</view>
			</view>

			<!-- 订单信息 -->
			<view class="order-info bg-card">
				<uni-card title="我的订单" extra="查看全部订单" is-full :border="false" @click="goOrderList('0')">
					<view class="uni-body">
						<view v-for="(item,i) in orderInfo" :key="i" class="order-info-item" @click="goOrderList(i+1)">
							<view style="position: relative;">
								<uni-icons custom-prefix="iconfont" :type="'icon-'+item.type" size="25" color="#000">
								</uni-icons>
								<uni-badge class="order-count" :text="item.count" v-show="item.count>0" />
							</view>
							<text>{{item.name}}</text>

						</view>
					</view>
				</uni-card>
			</view>

			<!-- 其他信息 -->
			<view class="other-info">
				<navigator :url="item.url" :open-type="item.method" class="other-info-item"
					:class="{'radius-top':i==0||i==5,'radius-btm':i==3||i==6}" v-for="(item,i) in otherInfo" :key="i">
					<view class="other-info-item-main" :class="{'boder-btm': i<3 || i==5}">
						<view class="item-main-left">
							<view style="width: 60rpx;">
								<uni-icons custom-prefix="iconfont" :type="'icon-'+item.type" size="20"></uni-icons>
							</view>
							<text>{{item.name}}</text>
						</view>
						<uni-icons type="right" size="18" color="#969799"></uni-icons>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardPack: [{
						name: '余额',
						num: 0.00
					},
					{
						name: '积分',
						num: 0
					},
					{
						name: '卡',
						num: 0
					}, {
						name: '优惠券',
						num: 0
					}
				],
				orderInfo: [{
						name: '待付款',
						type: 'daifukuan',
						count: 0
					},
					{
						name: '待发货',
						type: 'daifahuo',
						count: 0
					},
					{
						name: '待收货',
						type: 'daishouhuo',
						count: 0
					},
					{
						name: '待评价',
						type: 'daipingjia',
						count: 0
					},
					{
						name: '退款/售后',
						type: 'tuikuan',
						count: 0
					},
				],
				otherInfo: [{
						name: '购物车',
						type: 'gouwuche',
						url: '/pages/cart/cart',
						method: 'switchTab',
					},
					{
						name: '任务中心',
						type: 'renwu',
						url: '/subpkg/task-center/task-center',
						method: 'navigate',
					},
					{
						name: '返现',
						type: 'fanxian',
						url: '/subpkg/return-money/return-money',
						method: 'navigate',
					},
					{
						name: '赠品',
						type: 'zengpin',
						url: '/subpkg/free-gift/free-gift',
						method: 'navigate',
					},
					{
						name: '收货地址',
						type: 'dizhi',
						url: '/subpkg/shipping-address/shipping-address',
						method: 'navigate',
					},
					{
						name: '个人信息',
						type: 'yonghu',
						url: '/subpkg/user-info/user-info',
						method: 'navigate',
					},
					{
						name: '账号设置',
						type: 'zhanghao',
						url: '/subpkg/account-security/account-security',
						method: 'navigate',
					},
				]
			};
		},
		onLoad() {
			this.$store.dispatch('setUserInfo');
		},
		onShow() {
			this.getOrderCount();
		},
		methods: {
			// 跳转订单列表页面
			goOrderList(i) {
				if (i == 5) return;
				uni.navigateTo({
					url: `/subpkg/order-list/order-list?active=${i}`
				})
			},
			// 获取待付款订单数
			async getOrderCount() {
				let {
					data
				} = await uni.$http.reqOrderCount(this.user_id);
				this.orderInfo[0].count = data.count;
			},
			// 点击会员
			getVip() {
				uni.showToast({
					title: '敬请期待！',
					icon: 'none'
				})
			},
			// 改变头像昵称
			async changeImg() {
				let that = this;
				uni.getUserProfile({
					desc: '获取用户头像昵称',
					async success({
						userInfo
					}) {
						let {
							nickName,
							avatarUrl
						} = userInfo;
						await uni.$http.reqUploadNicImg(that.user_id, avatarUrl, nickName)
						that.$store.dispatch('setUserInfo');
						that.$refs.avatarUp.close();
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.user-header {
		position: relative;
		box-sizing: border-box;
		height: 300rpx;
		padding: 0 20rpx;
		background: linear-gradient(to bottom right, #f3eee1, #bf9264);

		.vip-code {
			position: absolute;
			top: 30rpx;
			right: 30rpx;
			height: 40rpx;
			line-height: 40rpx;
			padding: 0 20rpx;
			font-size: 22rpx;
			color: #fff;
			border-radius: 20rpx;
			background: rgba(0, 0, 0, .2);
		}

		.user-info-box {
			display: flex;
			align-items: center;
			height: 220rpx;

			.user-pic {
				width: 120rpx;
				height: 120rpx;
				margin-right: 30rpx;
				border-radius: 50%;
			}

			.user-name {
				font-size: 40rpx;
				font-weight: 700;
			}

			.growth-value {
				display: inline-block;
				height: 40rpx;
				padding: 0 20rpx;
				line-height: 40rpx;
				font-size: 25rpx;
				color: #fddda5;
				border-radius: 20rpx;
				background-color: #403c35;
			}
		}

		.vip-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			padding: 0 20rpx;
			font-size: 25rpx;
			background-color: #38332d;
			border-radius: 20rpx 20rpx 0 0;

			.vip-left,
			.vip-right {
				display: flex;
				align-items: center;
			}

		}


	}

	.user-body {
		padding: 0 20rpx;

		.card-pack {
			display: flex;
			justify-content: space-around;
			height: 140rpx;
			text-align: center;
			font-weight: 700;

			.card-pack-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
			}

			.pack-name {
				padding-top: 20rpx;
				font-size: 25rpx;
				color: #777;
				font-weight: normal;
			}
		}

		.order-info {
			.uni-card__header-content-title {
				font-weight: 700;
			}

			.uni-body {
				display: flex;
				justify-content: space-around;
				height: 100rpx;
				padding: 15rpx 0;

				.order-info-item {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					text-align: center;
					font-size: 25rpx;

					.order-count {
						position: absolute;
						top: 0;
						right: 0;
						transform: translate(10%, -50%);
					}
				}

			}


		}

		.other-info {
			padding: 20rpx 0;

			.other-info-item {
				padding-left: 25rpx;
				background-color: #fff;

				&:nth-child(5) {
					margin: 20rpx 0;
					border-radius: 15rpx;
				}

				.other-info-item-main {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 80rpx;
					padding-right: 30rpx;

					.item-main-left {
						display: flex;
						align-items: center;
						font-size: 28rpx;
					}
				}

				.boder-btm {
					border-bottom: 1px solid #e5e5e5;
				}
			}

			.radius-top {
				border-radius: 15rpx 15rpx 0 0;
			}

			.radius-btm {
				border-radius: 0 0 15rpx 15rpx;
			}
		}
	}

	.bg-card {
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 15rpx;
		overflow: hidden;
	}

	.avatar-up {
		height: 200rpx;
		overflow: hidden;
		text-align: center;
		background-color: #f7f8fa;
		border-radius: 20rpx 20rpx 0 0;

		.avatar-btn {
			height: 100rpx;
			line-height: 100rpx;
			background-color: #fff;
		}

		.avatar-close-btn {
			height: 80rpx;
			margin-top: 20rpx;
			line-height: 80rpx;
			background-color: #fff;
		}
	}
</style>
